<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="static/bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="static/bootstrap-3.3.7-dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="static/bootstrapvalidator-0.5.2/dist/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="static/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script type="text/javascript" src="static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="static/bootstrap-3.3.7-dist/js/bootstrap-show-password.js"></script>
<script type="text/javascript" src="webjars/bootbox/4.4.0/bootbox.js"></script>
<script type="text/javascript" src="static/bootstrapvalidator-0.5.2/dist/js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="static/bootstrapvalidator-0.5.2/dist/js/language/zh_CN.js"></script>
<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
		body{
			 background: url("static/img/login.jpg") ;
			 background-size: cover;
		}
		#a1{
			opacity:0.7;
			border-radius:10px;
			height:60px;
			font-size: 20px;
			padding-left: 100px;
			padding-top: 15px;
			background:#8E8E8E;
			color: white;
		}
		.material-icons{
			font-size: 20px;
		}
		.input-group-addon{
			padding: 0px 12px;
			padding-top: 6px;
		}
</style>
<script type="text/javascript">
bootbox.setDefaults({
	locale:'zh_CN',		//设置字符集
	size: 'small',		//设置大小
	title:'提示'			//标题提示
});
$(document).ready(function() {
    $('#defaultForm').bootstrapValidator({
// 默认的提示消息
     message: '该字段无效，请重新输入！',
		// 表单框里右侧的icon
     feedbackIcons: {
         valid: 'glyphicon glyphicon-ok',
         validating: 'glyphicon glyphicon-refresh'
     },
     fields: {
         username: {
             message: '用户名验证失败！',
             validators: {
                 notEmpty: {
                     message: '用户名不能为空！'
                 },
                 stringLength: {		//长度限制
                     min: 6,
                     max: 10,
                     message: '用户名长度必须在6到10位之间！'
                 },
                 regexp: {  	//正则表达式
                     regexp: /^[a-zA-Z0-9_\.]+$/,
                     message: '用户名只能包含大写、小写、数字和下划线'
                 }
             }
         },
         email: {
             validators: {
                 notEmpty: {
                     message: '邮箱地址不能为空！'
                 },
                 emailAddress: {
                     message: '邮箱地址格式有误！'
                 }
             }
         },
         password: {
             validators: {
                 notEmpty: {
                     message: '密码不能为空！'
                 },
                 stringLength: {		//长度限制
                     min: 6,
                     message: '密码长度不能少于6位！'
                 },
             }
         },
         phone:{
         	 validators: {
                  notEmpty: {
                      message: '电话号码不能为空！'
                  }
         	}
         },
         name:{
         	validators: {
                 notEmpty: {
                     message: '姓名不能为空！'
                 }
             }
         }
     }
    }).on('success.form.bv', function(e) {
    	var form= new FormData($("#defaultForm")[0]);
         // 阻止表单提交
         e.preventDefault();

         // 获取表单实例
         var $form = $(e.target);

         // 获取BootstrapValidator实例
         var bv = $form.data('bootstrapValidator');

         // 使用Ajax提交表单数据
         $.ajax({
			url: 'register',
			type: 'post',
			data: form,
			processData: false,  //不处理数据
			contentType: false,		//不设置内容类型
			success: function(result){
				if(result.success){
					bootbox.alert("注册成功");
				}else{
					bootbox.alert("该账号/手机号/电子邮箱已被注册！");
				}
			},
			error: function(result){
				bootbox.alert("注册失败！");
			}
		})
     }); 
});   
</script>
</head>
<body>
	<div id="a1"><img src="static/img/Library.png">&nbsp;图书借阅系统</div>
	<img src="static/img/lonin-logo.png" width="100px;" height="100px;" style="margin-left: 47%;margin-top: 8%;" >
	<form action="login" method="post">
		    <div class="modal-body" style="height: 150px; padding-left: 42%;margin-top: 3%">
			 <div class="form-group">
				<div >
				<input type="text" name="username" id="account" class="form-control " placeholder="请输入账号" required style="width: 300px; border-radius:20px;opacity:0.8;"></div>
			</div></br></br>
			 <div class="form-group">
				<div >
				<input type="password" name="password" id="account" class="form-control" placeholder="请输入密码" required style="width: 300px; border-radius:20px;opacity:0.8;"></div>
			</div>	
		 </div>
	     <div style="padding-left: 43%; padding-top: 2%">
	        <button type="submit" class="btn btn-primary" style="opacity:0.8; width: 200px;border-radius:20px;"><span class="glyphicon glyphicon-log-in"></span>登陆</button>
	        <button type="button" class="btn btn-default" style="opacity:0.8;border-radius:20px;" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-plus"></span>注册</button>
	     </div>
	 </form>
	 
	 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h3 class="modal-title" id="myModalLabel" >注册</h3>
	    </div> 
		<form id="defaultForm" class="form-horizontal">
		    <div class="modal-body">
				<div>
					<div class="form-group">
						<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label">账号:</label>
						<div class="col-sm-8"><input type="text" id="username" name="username" class="form-control" placeholder="账号" required></div>
						<div><label id="account-error" class="error col-lg-offset-4" for="account"></label></div>
					</div>
					<div class="form-group">
						<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label">密码:</label>
						<div class="col-sm-8">
						<!-- <input type="password" name="password" class="form-control" placeholder="密码" required> -->
						<input 
							id="password"
							name="password"
							data-toggle="password"
							data-placement="after"
							class="form-control"
							type="password"
							placeholder="密码"
							data-eye-class="material-icons"
							data-eye-open-class="visibility"
							data-eye-close-class="visibility_off"
							data-eye-class-position-inside="true"
							data-message="点击隐藏或显示密码" required>
						</div>
						<div><label id="password-error" class="error col-lg-offset-4" for="password"></label></div>
					</div>
					<div class="form-group">
						<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label">姓名:</label>
						<div class="col-sm-8"><input type="text" id="name" name="name" class="form-control" placeholder="姓名" required></div>
						<div><label id="account-error" class="error col-lg-offset-4" for="account"></label></div>
					</div>
					<div class="form-group">
						<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label">电子邮件:</label>
						<div class="col-sm-8"><input type="text" id="email" name="email" class="form-control" placeholder="电子邮件" required></div>
						<div><label id="account-error" class="error col-lg-offset-4" for="account"></label></div>
					</div>
					<div class="form-group">
						<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label">联系电话:</label>
						<div class="col-sm-8"><input type="text" id="phone" name="phone" class="form-control" placeholder="联系电话" required></div>
						<div><label id="account-error" class="error col-lg-offset-4" for="account"></label></div>
					</div>
				</div>
				  
		    </div>
	     	<div class="modal-footer">
	       		<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> 关闭</button>
	        	<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-log-in"></span> 提交</button>
	     	</div>
		</form>
	    </div>
	  </div>
	</div>
</body>
</html>